<template>
	<!-- :style="{'background-image':'url('+imgUrl+'news/bg.png'+')'}" -->
	<view class="homeBox">
		<uni-nav-bar :fixed="true" height="70" :statusBar="true" leftWidth="630rpx" :border="false"
			background-color="rgba(0, 0, 0, 1)">
			<template v-slot:left>
				<view class="homenav">
					<!-- <image class="homenav-img" src="@/static/img/logo.png" mode="aspectFill"></image> -->
					<!-- <view class="homenavR">
						<i class="iconfont icon-sousuo homenavRSousuo" @click="goPage('/page_home/search')"/>
						<swiper class="swiper1" :indicator-dots="indicatorDots1" :circular="circular1" :vertical="vertical1"
							:autoplay="autoplay1" indicator-active-color="transparent" indicator-color='rgba(238,238,238,1)'
							:interval="interval1" :duration="duration1">
							<swiper-item v-for="(item,index) in pageObj.pagedGoodsList.datas" :key="index" @click="goPage('/page_home/search?name='+item.name)">
								<view class="swiper1View">
									{{item.name}}
								</view>
							</swiper-item>
						</swiper>
					</view> -->
					<view :class="deviceClass">
						<i class="iconfont icon-sousuo homenavRSousuo"
							@click="goPage('/page_home/search?name='+searchName)" />
						<input placeholder="请输入文字" confirm-type="search" class="swiper1"
							@confirm="goPage('/page_home/search?name='+searchName)" v-model="searchName" type="text" />
					    <i class="iconfont icon-searchclose close-class" v-if="searchName.length>0" @click.stop="searchName = ''"/>
					</view>
				</view>
			</template>
		</uni-nav-bar>
		<view class="home-box">
			<!-- 轮播 -->
			<view class="homeLun-bo">
				<swiper :autoplay="true" :circular="true" :interval="6000" :duration="500" style="height:300rpx">
					<swiper-item v-for="(item, index) in pageObj.banners.elements" :key="index" @click="goPage2(item)">
						<video class="swiper-image" v-if="item.content.includes('videos')"
							:src="host+item.content"></video>
						<image :src="host+item.content" v-else-if="item.content.includes('images')" mode="aspectFill"
							class="swiper-image"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 横向滚动商品列表 -->
			<view class="home-scroll">
				<view class="home-scroll-title">
					<image class="home-scroll-title-img" src="@/static/img/hot.png" alt="" mode="aspectFill" /> 热卖中
				</view>
				<scroll-view scroll-x="true" class="scroll-container">
					<view class="product-list">
						<view v-for="(item, index) in pageObj.hotSales.elements" :key="index" class="product-item"
							@click="goPage('/page_home/plan?id='+item.id)">
							<image :src="host+item.content" mode="aspectFill" class="product-image"></image>
							<view class="product-name">{{ item.name }}</view>
							<!-- <text class="product-price">￥{{ item.price }}</text> -->
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 商品列表 -->
			<view class="shop-list">
				<view class="shop-list-title">发现精彩</view>
				<view v-for="(item, index) in pageObj.pagedGoodsList.datas" :key="index" class="shop-item"
					@click="goPage('/page_home/planDetail?id='+item.id)">
					<!-- 商品图片 -->
					<image :src="host+item.icon" mode="aspectFill" class="shop-image"></image>
					<!-- 商品信息 -->
					<view class="shop-info">
						<!-- 标题 -->
						<text class="shop-title">{{ item.name }}</text>
						<!-- 名字 -->
						<text class="shop-name" v-if="item.typeNames"><text
								v-for="row,idx in item.typeNames">{{row}}</text></text>
						<!-- 时间 -->
						<!-- <text class="shop-time">时间：{{ $publicFun.GetTime(item.validTimeStart).slice(0,10)  }}-{{ $publicFun.GetTime(item.validTimeEnd).slice(0,10)  }}</text> -->
						<view class="shop-info-bottom">
							<!-- 地点 -->
							<text class="shop-location">地点：{{ item.region }}</text>
							<!-- 价格 -->
							<text class="shop-price"><text class="price-icon">￥</text>
								{{ item.currentLowestUnitPrice/100 }}</text>
						</view>
					</view>
				</view>
			</view>
			<uLoadMore
				v-if="pageObj.pagedGoodsList&&pageObj.pagedGoodsList.datas&&pageObj.pagedGoodsList.datas.length>3"
				:status="more"></uLoadMore>
		</view>
	</view>
</template>

<script>
	import uLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'uni_home',
		components: {
			uLoadMore
		},
		data() {
			return {
				imgUrl: this.$apiFun.imgUrl,
				host: this.$apiFun.host,
				more: 'more', //noMore more loading
				NewsList: [{
					title: '尚可喜剧'
				}], //输入框轮播文案
				// 输入框轮播
				indicatorDots1: false,
				autoplay1: true,
				vertical1: true,
				interval1: 5000,
				duration1: 1000,
				circular1: true,
				// // 广告轮播
				// swiperList: [{
				// 		image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg'
				// 	},
				// 	{
				// 		image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg'
				// 	}
				// ],
				// // 商品横向滑动
				// productList: [{
				// 		image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
				// 		name: '商品1',
				// 		price: '99.99'
				// 	},
				// 	{
				// 		image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
				// 		name: '商品2',
				// 		price: '89.99'
				// 	},
				// 	{
				// 		image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
				// 		name: '商品3',
				// 		price: '79.99'
				// 	},
				// 	{
				// 		image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
				// 		name: '商品4',
				// 		price: '69.99'
				// 	}
				// ],

				// shopList: [{
				// 		image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
				// 		title: '济南 张蔷2025「香草橙柿 一路繁花」LIVE巡演济南站济南 张蔷2025「香草橙柿 一路繁花」LIVE巡演济南站',
				// 		time: '2023-10-01 14:00',
				// 		name: '周杰伦',
				// 		location: '北京',
				// 		price: '99.99'
				// 	},
				// 	{
				// 		image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
				// 		title: '济南|李宗盛2025「有歌之年』巡回演唱会-济南站2',
				// 		time: '2023-10-02 15:00',
				// 		name: '大双',
				// 		location: '上海',
				// 		price: '89.99'
				// 	},
				// 	{
				// 		image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
				// 		title: '济南|音乐剧《寻找李二狗》3',
				// 		time: '2023-10-03 16:00',
				// 		name: '二双',
				// 		location: '广州',
				// 		price: '79.99'
				// 	},
				// 	{
				// 		image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
				// 		title: '商品标题4',
				// 		time: '2023-10-04 17:00',
				// 		name: '小沈阳',
				// 		location: '深圳',
				// 		price: '69.99'
				// 	},
				// 	{
				// 		image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
				// 		title: '商品标题4',
				// 		time: '2023-10-04 17:00',
				// 		name: '林俊杰',
				// 		location: '深圳',
				// 		price: '69.99'
				// 	},
				// 	{
				// 		image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
				// 		title: '商品标题4',
				// 		time: '2023-10-04 17:00',
				// 		name: '周杰伦',
				// 		location: '深圳',
				// 		price: '69.99'
				// 	}
				// ],
				paramObj: {
					page: 2,
					pageSize: 10,
				},
				searchName: '',
				pageObj: {
					banners: {},
					hotSales: {},
					pagedGoodsList: {
						datas: []
					}
				},
				deviceClass:'',
			}
		},
		watch: {},
		computed: {
			//login_status 0 未登录 、1临时微信登录 2已登录
			...mapGetters([
				'login_status',

			]),

		},
		async onLoad(option) {
			const systemInfo = uni.getSystemInfoSync();
			console.log('systemInfo.platform',systemInfo.platform)
			if (systemInfo.platform === 'android') {
			  this.deviceClass = 'homenavR homenavR_android';
			} else if (systemInfo.platform === 'ios') {
			  this.deviceClass = 'homenavR homenavR_ios';
			} else {
			  this.deviceClass = 'homenavR'; // 或者其他默认样式类名
			}
			await this.init()
			this.goodsList()
		},
		mounted() {

		},
		methods: {
			doSearch() {

			},
			async init() {
				let data = await this.$apiFun.getApi(
					this.$api.overviewApi,
				)
				if(this.pageObj.pagedGoodsList.datas.length<10){
					this.more = 'noMore'
				}
				this.pageObj = data
			},
			async goodsList() {
				this.more = 'loading'
				let {
					datas
				} = await this.$apiFun.getApi(
					this.$api.goodsListApi,
					this.paramObj
				)
				if (datas.length > 0) {
					this.pageObj.pagedGoodsList.datas = this.pageObj.pagedGoodsList.datas.concat(datas)
					this.more = 'more'
				} else {
					this.more = 'noMore'
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
				this.searchName = ''
			},
			goPage1(url) {
				uni.reLaunch({
					url: url
				})
			},
			goPage2(item) {
				// banners.type	板块类型(0:广告 1:商品组 2:商品)
				let url = ''
				switch (this.pageObj.banners.type) {
					case 0:
						break;
					case 1:
						url = '/page_home/plan?id=' + item.id
						break;
					case 2:
						url = '/page_home/planDetail?id=' + item.id
						break;
					default:
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			addrFun(val) {
				console.log('val---------', val)
			}
		},
		onReachBottom() {
			console.log(1111111111111)

			this.paramObj.page++
			this.goodsList()
		},
		onPullDownRefresh() {},
	}
</script>

<style>
	page {
		height: 100%;
		background: #000000;
		color: white;
	}
</style>
<style scoped lang="less">
	/* 状态栏占位 */
	.status-contents {
		height: var(--status-bar-height);
	}

	page {
		width: 100%;
		height: 100%;
		background: #000000;
		color: rgba(255, 255, 255, 1);

		.homeBox {
			width: 100%;
			height: 100%;
			padding-bottom: 150rpx;
		}

		.home-box {
			padding: 0 15rpx;
			box-sizing: border-box;
			margin-bottom: 80rpx;
		}

		.homenav {
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: transparent;
			position: relative;
			.homenav-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				border: 2rpx solid #3b82f6;
			}
			.homenavR {
				display: flex;
				align-items: center;
				width: 100%;
				box-sizing: border-box;
				position: relative;
				flex: 1;
				position: absolute;
				left: 0;
				top:0;
				z-index: 999;
				padding: 0 40rpx 0 0;
				.homenavRSousuo {
					position: absolute;
					z-index: 1;
					left: 30rpx;
					color: #3b82f6;
				}
				.close-class{
					color: #3b82f6;
					position: absolute;
					z-index: 1;
					right: 70rpx;
					border: 1rpx solid #3b82f6;
					border-radius: 50%;
					padding: 3rpx;
					box-sizing: border-box;
				}
				.swiper1 {
					width: 100%;
					height: 70rpx;
					// background-color: rgba(0, 0, 0, .1);
					border: 1rpx solid #3b82f6;
					margin: 0 auto;
					border-radius: 70rpx;
					padding: 0 50rpx 0 80rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #fff;
					line-height: 70rpx;
					width: 100%;
					overflow: hidden;

					.swiper1View {
						white-space: nowrap;
					}
				}
			}
			
			.homenavR_android{
				padding: 15rpx 40rpx 0 0;
			}
			.homenavR_ios{
				padding: 0 40rpx 0 0;
			}
			.qiandao {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
			}
		}


		.homeLun-bo {
			// margin-top: 15rpx;
			height: 300rpx;
			overflow: hidden;
			border-radius: 10rpx;

			.swiper-image {
				border-radius: 10rpx;
				width: 100%;
				height: 300rpx;
			}
		}

		.home-scroll {
			background-color: transparent;
			padding: 15rpx;
			// padding: 15rpx 0;
			margin-top: 15rpx;
			box-sizing: border-box;
			border-radius: 6rpx;

			.home-scroll-title {
				display: flex;
				align-items: center;
				width: 100%;
				font-size: 32rpx;
				color: rgba(255, 255, 255, 1);
				margin-bottom: 10rpx;

				.home-scroll-title-img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 5rpx;
				}
			}

			.scroll-container {
				white-space: nowrap;
				/* 防止换行 */
				width: 100%;
				padding: 0rpx;

				.product-list {
					display: inline-flex;
					/* 横向排列 */
				}

				.product-item {
					width: 200rpx;
					margin-right: 15rpx;

					.product-image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}

					.product-name {
						display: block;
						font-size: 28rpx;
						margin-top: 10rpx;
						width: 100%;

						color: rgba(255, 255, 255, 0.7);
						white-space: pre-wrap;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 限制文本显示为2行 */
						-webkit-box-orient: vertical;
						/* 垂直排列盒子 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						// text-overflow: ellipsis;
						// overflow: hidden;
						// white-space: nowrap;
					}

					.product-price {
						display: block;
						font-size: 24rpx;
						color: #ff5000;
						margin-top: 5rpx;
					}
				}


			}


		}

		/* 商品列表 */
		.shop-list {
			margin: 15rpx auto 0;
			display: flex;
			flex-direction: column;

			/* 竖向排列 */
			.shop-list-title {
				font-size: 32rpx;
				color: rgba(255, 255, 255, 1);
				margin-bottom: 15rpx;
			}

			/* 单个商品项 */
			.shop-item {
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				// background-color: rgba(255, 255, 255, 0.1);
				border-radius: 10rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			}

			/* 商品图片 */
			.shop-image {
				border-radius: 10rpx;
				width: 140rpx;
				height: 200rpx;
			}

			/* 商品信息 */
			.shop-info {
				flex: 1;
				padding: 0;
				margin-left: 20rpx;
			}

			/* 商品标题 */
			.shop-title {
				height: 85rpx;
				font-size: 30rpx;
				color: #fff;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 限制文本显示为2行 */
				-webkit-box-orient: vertical;
				/* 垂直排列盒子 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 显示省略号 */
				margin-bottom: 10rpx;
			}

			.shop-name {
				display: block;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.7);
				margin-bottom: 5rpx;

			}

			.shop-time {
				display: block;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.7);
				margin-bottom: 5rpx;
			}

			.shop-info-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				/* 商品地点 */
				.shop-location {
					display: block;
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.7);
					margin-bottom: 10rpx;
				}

				/* 商品价格 */
				.shop-price {
					display: block;
					font-size: 30rpx;
					color: #f87fa8;
					font-weight: bold;

					.price-icon {
						font-size: 18rpx;
					}
				}
			}
		}

	}
</style>